import React, { memo, useState } from "react";
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import icon from "../../assets/img/small_you_icon.png";
import { LoginWrapper } from "./style";

// redux
import { setUserInfoAction } from "./store/actionCreators";

// antd样式
import { Input, Divider } from "antd";
import { UserOutlined, LockOutlined, HomeOutlined } from "@ant-design/icons";

// 网络请求
import { login, register } from "@/services";

export default memo(function Login() {
  // 当前页面是登录还是注册
  const [isLoginPage, setIsLoginPage] = useState(true);

  const [username, setUsername] = useState(() => {
    return localStorage.getItem("username");
  });
  const [password, setPassword] = useState(() => {
    return localStorage.getItem("password");
  });
  const [schoolId, setSchoolId] = useState();

  const history = useHistory();
  const dispatch = useDispatch();

  // 账户名和密码的改变
  const changeUserNameInput = (e) => {
    setUsername(e.target.value);
  };
  const changePasswordInput = (e) => {
    setPassword(e.target.value);
  };
  // 学校ID
  const changeSchoolIdInput = (e) => {
    setSchoolId(e.target.value);
  };
  // 提交
  const handleSubmit = () => {
    if (isLoginPage) {
      const userInfo = {
        userName: username,
        passWord: password,
      };
      login(userInfo).then((res) => {
        if (res.code === 200) {
          localStorage.setItem("username", username);
          localStorage.setItem("password", password);
          // 保存信息到redux
          const userInfo = Object.assign(res.data.user, { isLogin: true });
          dispatch(setUserInfoAction(userInfo));
          history.push("/profile");
        }
      });
    } else {
      const userInfo = {
        userName: username,
        passWord: password,
        schoolId: schoolId,
      };
      register(userInfo).then((res) => {
        console.log(res);
      });
    }
  };

  // 登录和注册的切换
  const changeIsLogin = () => {
    setIsLoginPage(!isLoginPage);
    setUsername("");
    setPassword("");
  };

  return (
    <LoginWrapper>
      <div className="head-img">
        <img src={icon} alt="" />
      </div>
      <div className="title">小柚-分享每一种生活</div>
      <div className="main">
        <Input
          value={username}
          onChange={changeUserNameInput}
          size="large"
          placeholder="请输入账号..."
          prefix={<UserOutlined />}
          bordered={false}
        />
        <Divider className="test" />
        <Input.Password
          value={password}
          onChange={changePasswordInput}
          size="large"
          placeholder="请输入密码..."
          prefix={<LockOutlined />}
          bordered={false}
        />
        <Divider />
        {isLoginPage ? (
          ""
        ) : (
          <Input
            value={schoolId}
            onChange={changeSchoolIdInput}
            size="large"
            placeholder="学校ID（选填）"
            prefix={<HomeOutlined />}
            bordered={false}
          />
        )}
      </div>
      <div className="foot">
        <button className="login-btn" onClick={handleSubmit}>
          {(isLoginPage && "登 录") || "注 册"}
        </button>
        <Divider>
          {(isLoginPage && "还没有账号？") || "已有帐号？"}
          <span onClick={changeIsLogin} style={{ color: "#eb2f96" }}>
            {(isLoginPage && "点击注册") || "点击登录"}
          </span>
        </Divider>
      </div>
    </LoginWrapper>
  );
});
